<template>
  <!-- 下拉树。由于 value 不能确定是整数还是字符串，就暂时不实现 v-model 了 -->
  <div class="input-tree">
    <el-popover
      ref="popover"
      placement="bottom-start"
      trigger="click"
      popper-class="input-tree-popper">
      <el-tree
        :data="data"
        :props="props"
        :node-key="props.id"
        ref="tree"
        class="tree"
        @current-change="currentChangeHandle">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span :title="node.label">{{ node.label }}</span>
        </span>
      </el-tree>
    </el-popover>
    <el-input id="input" v-model="name" v-popover:popover :placeholder="'请选择' + placeholder" :clearable="clearable" @clear="clearHandle" class="item-list__input">
      <!-- <i slot="suffix" class="el-icon-arrow-down" style="position: absolute; top: 50%; right: 3px; transform: translateY(-50%);"></i> -->
    </el-input>
  </div>
</template>
<script>
export default {
  name: 'inputTree',
  props: {
    /** 数据源 */
    data: {
      type: Array,
      default: () => []
    },
    placeholder: {
      type: String,
      default: ''
    },
    /** 是否点击叶子节点才显示数据 */
    onlyLeafClickValid: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: true
    },
    validatorClick: {
      type: Function,
      default: null
    },
    props: {
      type: Object | Array,
      default: () => {
        return {
          id: 'id',
          label: 'label',
          children: 'children'
        }
      }
    }
  },
  data () {
    return {
      name: ''
    }
  },
  created () {},
  methods: {
    // 树选中
    currentChangeHandle (data, node) {
      if (this.onlyLeafClickValid) {
        if (!data[this.props.children] || data[this.props.children].length === 0) {
          this.name = data[this.props.label]
          this.$emit('current-change', data, node)
          this.$refs.popover.showPopper = false
        }
      } else {
        this.name = data[this.props.label]
        this.$emit('current-change', data, node)
        this.$refs.popover.showPopper = false
      }
    },
    // 设置当前选中节点
    setCurrentKey (id) {
      this.$refs.tree.setCurrentKey(id)
      this.$nextTick(_ => {
        this.name = (this.$refs.tree.getCurrentNode() || {})[this.props.label]
      })
    },
    clearHandle () {
      this.$emit('current-change', null, null)
      this.$nextTick(_ => {
        this.name = ''
        this.$refs.popover.showPopper = false
      })
    }
  }
}
</script>

<style lang="scss">
.input-tree-popper {
  .tree {
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }
}
.input-tree {
  .item-list__input,
  .icon-list__input {
      > .el-input__inner {
      cursor: pointer;
    }
  }
  &__icon-popover {
    width: 458px;
    overflow: hidden;
  }
  &__icon-inner {
    width: 478px;
    max-height: 258px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  &__icon-list {
    width: 458px;
    padding: 0;
    margin: -8px 0 0 -8px;
    > .el-button {
      padding: 8px;
      margin: 8px 0 0 8px;
      > span {
        display: inline-block;
        vertical-align: middle;
        width: 18px;
        height: 18px;
        font-size: 18px;
      }
    }
  }
  .icon-list__tips {
    font-size: 18px;
    text-align: center;
    color: #e6a23c;
    cursor: pointer;
  }
  .custom-tree-node {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

</style>
